@extends("layout.admin")

@section("title")
    标签组--添加
@endsection

@section("content")
    <style>
        .layui-form-label {
            text-align: left !important;
        }

        .layui-input-block {
            margin-left: 148px !important;
        }
    </style>
    <div class="layui-card-body ">
        <form id="tag_group_create" style="margin-top: 15px;" method="post"
              action="{{route('admin.tags.create.attach')}}"
              class="layui-form">
            {{csrf_field()}}
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-block" style="width: 60%;">
                            <input type="text" id="name" name="data[name]" autocomplete="off" placeholder="请输入名称"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label" style="width:20% !important;">适用范围</label>
                        <div class="layui-input-block">
                            @foreach($scope as $s)
                                <input type="checkbox" name="data[scope][]" class="parent" lay-skin="primary"
                                       value="{{$s['id']}}" title="{{$s['name']}}">
                            @endforeach
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width:12% !important;">添加标签</label>
                        <div class="layui-input-block" style="width: 60%;">
                            <select name="tags" id="tags" lay-filter="tags">
                                <option value="0">--请选择--</option>
                                @foreach($tags as $tag)
                                    <option data-name="{{$tag['name']}}"
                                            value="{{$tag['id']}}">{{$tag["name"]}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    {{--表格显示--}}
                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width:100% !important;">分配的标签</label>
                        <table id="form-create" class="layui-table" style="width: 78%;text-align: center">
                            <thead>
                            <tr>
                                <th style="text-align: center;">标签名称</th>
                                <th style="text-align: center;">排序</th>
                                <th style="text-align: center;">操作</th>
                            </tr>
                            </thead>
                            <tbody class="tagList">
                            <tr class="showNo">
                                <td colspan="3">
                                    <span>尚未选择</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-row layui-col-xs5" style="text-align: right">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
@endsection
@section('script')
    <script>
        layui.use(['form', 'table', 'layer'], function () {
            var table = layui.table,
                form = layui.form;
            table.init("table-hide");
            form.on("select(tags)", function (data) {
                let element;
                //添加一行
                $(".showNo").remove();
                let id = $("#tags").val();
                let name = $(data.elem).find("option:selected").attr("data-name");
                //排重
                let flag=0;
                $('input[name="data[tag_id][]"]').each(function () {
                    if(id == $(this).val()){
                        flag++;
                    }
                });
                //选中后移除选中值
                if (id > 0&&flag==0) {
                    element = $([
                        '<tr>',
                        '<td>' + name + '<input style="display: none;" class="hidenIn" name="data[tag_id][]" value="' + id + '" type="text" /></td>',
                        '<td><input name="data[sort][]" value="0" type="text" /></td>',
                        '<td>',
                        '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>',
                        '</td>',
                        '</tr>',
                    ].join(''));

                    //监听删除
                    element.find('.del').on('click', function () {
                        $(this).parents('tr').remove();
                    })
                }
                flag=0;
                $('#form-create tbody').append(element)
            });
        });
    </script>
@endsection

